<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo  dy{
				width: 100%;
				height: 1000000px;
				background-image: url(img/草帽团.png);
				background-size: co ntain;
				/* 
				 函数 cover   等比例放大图片   特点：原图按照比例放大存背景空间
				 【开发者：背景图大小是否等于背景空间】
				      contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
				 【开发者：背景图等比例显示在背景空间】
				 */
				/* 背景附件--尺寸中存在covere或者contain */
				background-attachment: fixed; /* 背景固定  scroll 不固定*/
			}
			div{
				width: 500px;
				height: 500px;
				background-color: #adeaea;
				background: #eaadea;
				background-image: url(img/草帽团.png);
				/* 问题：超大图——不显示 小图-显示
				 注意：背景空间大小，如果图小于背景空间---平铺
				 */
				background-repeat: no-repeat; 
				 /* 不平铺  repeat-x，y 横，纵平铺*/
				 background-size: 30%;
				 /* 背景尺寸属性值：数值px % | 函数 cover contain*/
				 /* 背景定位：前提背景空间大于背景图 关键字：center/left/top/bottom/right*/
				 background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum enim, est, alias ducimus sint maxime culpa quos exercitationem sit vel rem animi harum qui nam quo facere laudantium ut temporibus.
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam totam saepe est quibusdam quam delectus mollitia eligendi, facere nemo recusandae voluptatum consectetur hic, veritatis dolorem? Blanditiis qui ea possimus a.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quam quos possimus a laudantium dicta, cupiditate velit, quae totam, veniam illo non iusto blanditiis deleniti culpa. Rerum sapiente ducimus quas.
		<!-- html img 引入一图片张图片，位置不可随意改变
		     css  背景图片  引入一张图片，位置可以随意改变
	            子属性  background_color 背景颜色
				        background_image 背景图
						background-repeat背景重复
						background-size  背景尺寸
						background-attachment 背景附件
						background-position  背景定位
				复合属性  background: background_image background_color  background-position
				                     background-size background-repeat和background-attachment
				简写属性：background: background_image background_color  background-position|background-size 
				替代子属性：background_image background_color background-repeat
			  -->
			  
			  <div></div>
	</body>
</html>